
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="/static/default/wx/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/default/wx/css/wap.css?2">
    <#include "/wx/inc.ftl"/>
    <title>首页</title>
</head>
<body>

<#include "/wx/header.ftl"/>

<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
    <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="/static/default/wx/img/goTop.png" />
    </a>
</div>

<div class="pet_mian" id="top">
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >
        <ul class="am-slides">
            <li class="bannerClass">
                <img src="/static/default/wx/img/banner1.jpg" style="height:176px;">
                <div class="pet_slider_font"></div>
                <div class="pet_slider_shadow"></div>
            </li>
            <li class="bannerClass">
                <img src="/static/default/wx/img/banner.jpg" style="height:176px;">
                <div class="pet_slider_font"></div>
                <div class="pet_slider_shadow"></div>
            </li>
            <li class="bannerClass">
                <img src="/static/default/wx/img/sdf.jpg" style="height:176px;">
                <div class="pet_slider_font"></div>
                <div class="pet_slider_shadow"></div>
            </li>
            <li class="bannerClass">
                <img src="/static/default/wx/img/uyt.jpg" style="height:176px;">
                <div class="pet_slider_font"></div>
                <div class="pet_slider_shadow"></div>
            </li>
        </ul>
    </div>

    <div class="pet_content_main">
        <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
            <div class="am-list-news-bd">
                <ul id="contentList" class="am-list">
                <@contents pn=pn order=order>
                    <#list results.content as row>
                    <!--缩略图在标题右边-->
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                        <div class="pet_list_one_info">
                            <div class="pet_list_one_info_l">
                                <div class="pet_list_one_info_ico"><img src="${base + row.author.avatar}" alt=""></div>
                                <div class="pet_list_one_info_name">${row.author.username}</div>
                            </div>
                            <div class="pet_list_one_info_r">
                                <div class="pet_list_tag pet_list_tag_xxs">新鲜事</div>
                            </div>
                        </div>
                        <div class=" am-u-sm-12 am-list-main pet_list_one_nr">
                            <h3 class="am-list-item-hd pet_list_one_bt"><a href="/view/${row.id}" class="">${row.title}</a></h3>
                            <#--<div class="am-list-item-text pet_list_one_text">每逢长假，总有那么一群人选择远离人山人海，静静地呆在家，坐在电脑电视前。长时间的工作学习让他们感觉很疲惫，对什么都提不起劲，打开电脑却不知道干什么好…</div>-->
                        </div>
                        <#--<div class="am-u-sm-4 am-list-thumb">-->
                            <#--<a href="###" class="">-->
                                <#--<img src="/static/default/wx/img/q1.jpg" class="pet_list_one_img" alt=""/>-->
                            <#--</a>-->
                        <#--</div>-->
                    </li>
                    </#list>
                </@contents>
                </ul>
            </div>
        </div>
    </div>
    <div style="text-align:center;margin:10px;">
        <input type="hidden" id="totalPage" value="${(results.totalPages)!}"/>
        <input type="hidden" id="currentPage" value="${(results.number+1)!}"/>
        <#--<a id="bottomClass" class="am-btn am-btn-success btn-loading-example" type="button">没到底线<i class="am-long-arrow-down"></i></a>-->
        <#--<button class="am-btn am-btn-primary">-->
            <#--下载片片-->
            <#--<i class="am-icon-cloud-download"></i>-->
        <#--</button>-->
        <button id="bottomClass" style="font-size:18px;" type="button" class="am-btn am-btn-success btn-loading-example">我的底线呢<i class="am-icon-long-arrow-down"></i></button>
    </div>

    <#include "/wx/footer.ftl"/>

</div>


<#include "/wx/htmleaf.ftl"/>

<script src="/static/default/wx/js/jquery.min.js"></script>
<script src="/static/default/wx/js/amazeui.min.js"></script>
<script src="/static/default/wx/js/common.js"></script>
<script>
    function checkIsLast(){
        $('#bottomClass').html('我的底线在这里');
        $('#bottomClass').removeClass("btn-loading-example");
        $('#bottomClass').removeClass("am-btn-success");
        $('#bottomClass').addClass("am-btn-warning");
    }

    /**
     * 底部按钮的处理
     */
    function changeButton(){
        var currentPage = $("#currentPage").val();
        var totalPage = $("#totalPage").val();


        if(currentPage==totalPage){
            checkIsLast();
        }else{
            var nextPage = parseInt(currentPage)+1;
            jQuery.ajax({
                url: "/api/contents",
                data: {'pn':nextPage},
                dataType: "json",
                type :  "POST",
                cache : false,
                async: false,
                error : function(i, g, h) {
                    layer.msg('发送错误', {icon: 2});
                },
                success: function(ret){
                    var number = ret.number;
                    var datas = ret.content;
                    if(ret.last){
                        checkIsLast();
                    }
                    var ulObject = $("#contentList");
                    var ulHtml = "";
                    $(datas).each(function(index,item){
                        ulHtml+="<li class='am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block'>";
                        ulHtml+="<div class='pet_list_one_info'>";
                        ulHtml+="<div class='pet_list_one_info_l'>";
                        ulHtml+="<div class='pet_list_one_info_ico'><img src="+item.author.avatar+" alt=''></div>";
                        ulHtml+="<div class='pet_list_one_info_name'>"+item.author.username+"</div>";
                        ulHtml+="</div>";
                        ulHtml+="<div class='pet_list_one_info_r'>";
                        ulHtml+="<div class='pet_list_tag pet_list_tag_xxs'>新鲜事</div>";
                        ulHtml+="</div>";
                        ulHtml+="</div>";
                        ulHtml+="<div class='am-u-sm-12 am-list-main pet_list_one_nr'>";
                        ulHtml+="<h3 class='am-list-item-hd pet_list_one_bt'><a href='###' class=''>"+item.title+"</a></h3>";
                        ulHtml+="</div>";
                        ulHtml+="</li>";
                        console.log(item.title);
                    });
                    ulObject.append(ulHtml);
                    $("#currentPage").val(nextPage);
                    $('#bottomClass').html('我的底线呢');
                }
            });
        }
    }

    $(function(){
        $(".bannerClass").on('click',function(){
            window.location.href = "/channel/5"
        });

        $('.btn-loading-example').click(function () {
            // var $btn = $(this);
            // $btn.button('loading');
            // setTimeout(function(){$btn.button('reset');}, 2000);
            changeButton();

        });

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });

        $('.am-list > li:last-child').css('border','none');
        function auto_resize(){
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());

        }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
    });

</script>
</body>
</html>
